<?php

/* @var $this yii\web\View */
$this->registerJsFile('/js/jquery.min.js');

$this->registerCssFile('/css/chat/chat.css?v=1.0.5');
$this->registerJsFile('/js/tools.js?v=1.0.1');
$this->registerJsFile('/js/common.websocket.js');
$this->registerJsFile('/js/chat/chat.js?v=1.0.5');

$this->title = "与".$friend_name."聊天中......";
?>
<audio src="/sms.mp3" id="mymusic"></audio>
<div class="chat-msg-outter" id="chat-msg-outter">
    <input type="hidden" id="latest-first" value="<?php echo count($history)==0 ? "" : $history[count($history)-1]['id']?>"/>
    <input type="hidden" id="friend_headimg" value="<?= $friend_headimg?>"/>
    <input type="hidden" id="friend_id" value="<?= $friend_id?>"/>
    
    <?php if(count($history)==10){?>
    <div class="more-msg-outter"><span class="msg-tips" id="more-msg"  data-chatid="<?= $chatid?>" data-friendid="<?= $friend_id?>">点击查看更多消息</span></div>
    <?php } ?>
    <div class="chat-msg-you-and-me" id="chat-msg-you-and-me">
    <?php for($i = count($history)-1; $i>=0; $i--){ ?>
        <?php if($friend_id == $history[$i]['senderid']){ ?>
        <div class="chat-msg" id="msg<?= $history[$i]['id']?>">
                <div class="user-head-you">
                    <img class="head-img" src="<?= $friend_headimg?>" />
                </div>
                <div class="msg-content-you">
                    <div class="chat-content-you"><?= $history[$i]['content']?></div>
                </div>
            </div>
        <?php }else{ ?>
            <div class="chat-msg" id="msg<?= $history[$i]['id']?>">
                <div class="user-head-me">
                    <img class="head-img" src="<?= $my_headimg?>" />
                </div>
                <div class="msg-content-me">
                    <div class="chat-content-me"><?= $history[$i]['content']?></div>
                </div>
            </div>
        <?php }?>
        
    <?php }?>
    </div>
</div>
<div class="input-focus-background" id="input-focus-background"></div>
<div class="chat-editor-outter" id="chat-editor-outter">
    <div class="msg-input-outter"><input type="text" id="content-edit"/></div>
    <div class="msg-submit-outter"><span class="msg-submit" id="msg-submit" data-chatid="<?= $chatid?>" data-friendid="<?= $friend_id?>" data-friendname="<?= $friend_name?>">发送</span></div>
</div>